import { DatePicker, ConfigProvider } from "antd";
import selectArrow from "@/assets/theme/select-arrow.png";
import selectArrowLight from "@/assets/theme/select-arrow-light.png";
import styles from "./index.module.scss";
import { useSelector } from "react-redux";

const { RangePicker } = DatePicker;
export default function Date(props) {
  const theme = useSelector((state) => state.theme);
  const handleChange = (value) => {
    props.getSelectValue(value);
  };
  return (
    <ConfigProvider
      theme={{
        cssVar: true,
        components: {
          DatePicker: {
            colorIcon: "#ffffff",
            colorTextDisabled: "rgba(255, 255, 255, 0.3)",
            colorTextHeading: "#ffffff",
            paddingSM: 40,
            colorTextPlaceholder: "#ffffff",
            colorText: "#ffffff",
            algorithm: false,
            primaryShadow: "0px 0px 12px rgba(0, 0, 0, 0)",
            hoverBorderColor: "transparent",
            activeBorderColor: "transparent",
            colorBorder: "transparent",
            colorBgElevated: "rgb(20, 31, 57)",
            optionSelectedBg: "rgb(143, 172, 215)",
            colorBgContainer: "transparent",
            controlOutlineWidth: "0",
            cellActiveWithRangeBg: "#4096ff",
          },
        },
      }}
    >
      <div className={styles.selectBox}>
        <RangePicker
          allowClear
          suffixIcon={
            <img
              style={{ width: 14, height: 14 }}
              src={theme?selectArrowLight:selectArrow}
              alt="加载中..."
            />
          }
          style={{
            width: 430,
            height: 46,
          }}
          placeholder="日期"
          onChange={handleChange}
        />
      </div>
    </ConfigProvider>
  );
}
